<template>
  <div class="app-container">
    <el-button
      icon="el-icon-plus"
      type="primary"
      @click="showAdd"
    >{{ $t('add') }}</el-button>
    <el-table :data="activityList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item :label="$t('updateDate')">
              <span>{{ props.row.updateDate }}</span>
            </el-form-item>
            <el-form-item :label="$t('createdDate')">
              <span>{{ props.row.createdDate }}</span>
            </el-form-item>
            <el-form-item :label="$t('version')">
              <span>{{ props.row.version }}</span>
            </el-form-item>
            <el-form-item :label="$t('name')">
              <span>{{ props.row.filePath }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('name')" />
      <el-table-column prop="activityKey" :label="$t('keyName')" />
      <el-table-column :label="$t('disable')" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.disable"
            @change="disableChange(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('version')">
        <template slot-scope="scope">
          <el-select v-model="scope.row.activityVersionId" @change="versionChange(scope.row)">
            <el-option
              v-for="item in scope.row.appActivityVersionList"
              :key="item.activityVersionId"
              :label="item.version"
              :value="item.activityVersionId"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('function')"
        width="250"
      >
        <template slot-scope="scope">

          <el-button
            type="text"
            icon="el-icon-s-ticket"
            @click="editVersion(scope.row)"
          >{{ $t('version') }}</el-button>
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >{{ $t('edit') }}</el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >{{ $t('delete') }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right;">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :title="dialogActivityTitle" :visible.sync="dialogActivityFormVisible">
      <el-form :model="activity">
        <el-form-item :label="$t('name')" label-width="20%">
          <el-input v-model="activity.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogActivityFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdateActivity">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cancelNotice } from '@/util/common'
import { pageGetAppActivity, deleteListAppActivity, updateAppActivity, insertAppActivity } from '@/api/app/appActivityApi'
import { getPageSize } from '@/util/storage'
export default {
  name: 'AppActivity',
  filters: {},
  data() {
    return {
      dialogActivityTitle: null,

      appId: null,
      appName: null,
      activityList: [],
      currentPage: 1,
      pagerCount: 4,
      total: 0,
      pageSize: getPageSize(),
      dialogActivityFormVisible: false,
      activity: {
        'activityId': null,
        'name': null
      }
    }
  },
  created() {
    const param = this.$route.query
    this.appId = param.appId
    this.appName = param.name
    this.pageGetAppActivity()
    this.setTagsViewTitle()
  },
  methods: {
    editVersion(item) {
      this.$router.push({
        path: '/app/activity/version/' + item.activityId,
        query: { activityId: item.activityId, activityName: item.name }
      })
    },
    versionChange(item) {
      updateAppActivity({
        activityVersionId: item.activityVersionId,
        activityId: item.activityId
      }).then(() => {
        this.pageGetAppActivity()
      })
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.appName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    showAdd() {
      this.dialogActivityFormVisible = true
      this.activity = {}

      this.dialogActivityTitle = this.$t('add')
    },

    handleEdit(item) {
      this.activity = item

      this.dialogActivityTitle = this.$t('update')
      this.dialogActivityFormVisible = true
    },
    handleDelete(item) {
      const that = this
      this.$confirm(this.$t('delete'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(function() {
        deleteListAppActivity({ idList: [item.activityId] }).then(() => {
          that.pageGetAppActivity()
        })
      }).catch(function() {
        cancelNotice(that)
      })
    },
    addOrUpdateActivity() {
      if (!this.activity.activityId) {
        insertAppActivity({
          appId: this.appId,
          name: this.activity.name
        }).then(() => {
          this.dialogActivityFormVisible = false
          this.pageGetAppActivity()
        })
      } else {
        updateAppActivity({
          ...this.activity
        }).then(() => {
          this.dialogActivityFormVisible = false
          this.pageGetAppActivity()
        })
      }
    },
    disableChange(item) {
      updateAppActivity({
        activityId: item.activityId,
        disable: item.disable
      }).then(res => {
        this.pageGetAppActivity()
      })
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.pageGetAppActivity()
    },
    pageGetAppActivity() {
      pageGetAppActivity({
        appId: this.appId,
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.activityList = data.data
        }
      })
    }
  }
}
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
